<%--
  Created by IntelliJ IDEA.
  User: ZTK
  Date: 2025/6/16
  Time: 09:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>我的订单 - 二手平台</title>
    <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 70px;
        }
        .order-container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            padding: 25px;
            margin-bottom: 30px;
        }
        .order-header {
            border-bottom: 2px solid #f1f1f1;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        .order-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        .order-header-info {
            background-color: #f9f9f9;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e0e0e0;
        }
        .order-id {
            font-weight: 600;
            font-size: 18px;
        }
        .order-date {
            color: #6c757d;
        }
        .order-status {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }
        .status-pending {
            background-color: #ffc107;
            color: #333;
        }
        .status-paid {
            background-color: #28a745;
            color: white;
        }
        .status-canceled {
            background-color: #dc3545;
            color: white;
        }
        .order-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f1f1f1;
        }
        .order-item:last-child {
            border-bottom: none;
        }
        .order-item-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 5px;
            margin-right: 15px;
        }
        .order-footer {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f9f9f9;
            border-top: 1px solid #e0e0e0;
        }
        .total-amount {
            font-size: 18px;
            font-weight: 700;
            color: #ff6b6b;
        }
        .btn-detail {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        .btn-detail:hover {
            background-color: #0069d9;
        }
        .pagination {
            justify-content: center;
            margin-top: 30px;
        }
        .empty-orders {
            text-align: center;
            padding: 40px 0;
        }
        .empty-orders i {
            font-size: 80px;
            color: #6c757d;
            margin-bottom: 20px;
        }
        .empty-orders p {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .navbar{
            background-color: #ff5000;
        }

        .navbar-brand{
            color: white;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/product/list">二手平台</a>
        <div class="d-flex flex-grow-1 justify-content-center">
            <div class="text-white fw-bold">我的订单</div>
        </div>
        <ul class="navbar-nav">
            <c:choose>
                <c:when test="${not empty sessionScope.currentUser}">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                                ${sessionScope.currentUser.username}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/order/list">我的订单</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/logout">退出登录</a></li>
                        </ul>
                    </li>
                </c:when>
                <c:otherwise>
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/user/login">登录</a>
                    </li>
                </c:otherwise>
            </c:choose>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="order-container">
        <div class="order-header">
            <h4>我的订单</h4>
            <p class="text-muted">共 ${totalOrders} 个订单</p>
        </div>

        <c:choose>
            <c:when test="${not empty orders && !orders.isEmpty()}">
                <c:forEach items="${orders}" var="order">
                    <div class="order-card">
                        <div class="order-header-info">
                            <div>
                                <span class="order-id">订单号: ${order.id}</span>
                                <span class="order-date ms-3">
                                    <fmt:formatDate value="${order.createdTime}" pattern="yyyy-MM-dd HH:mm" />
                                </span>
                            </div>
                            <span class="order-status status-${order.status == '待支付' ? 'pending' : (order.status == '已支付' ? 'paid' : 'canceled')}">
                                    ${order.status}
                            </span>
                        </div>

                        <c:forEach items="${order.orderItems}" var="item" end="2">
                            <div class="order-item">
                                <img src="${pageContext.request.contextPath}${item.product.imagePath}"
                                     class="order-item-image"
                                     alt="${item.product.name}">
                                <div class="flex-grow-1">
                                    <div>${item.product.name}</div>
                                    <div class="d-flex justify-content-between mt-2">
                                        <div>¥<fmt:formatNumber value="${item.price}" pattern="#,##0.00" /> × ${item.quantity}</div>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>

                        <c:if test="${order.orderItems.size() > 3}">
                            <div class="text-center py-2 bg-light">
                                共 ${order.orderItems.size()} 件商品
                            </div>
                        </c:if>

                        <div class="order-footer">
                            <div class="total-amount">
                                实付: ¥<fmt:formatNumber value="${order.totalAmount}" pattern="#,##0.00" />
                            </div>
                            <a href="${pageContext.request.contextPath}/order/detail/${order.id}" class="btn btn-detail">
                                订单详情
                            </a>
                        </div>
                    </div>
                </c:forEach>

                <!-- 分页控件 -->
                <nav>
                    <ul class="pagination">
                        <c:if test="${currentPage > 1}">
                            <li class="page-item">
                                <a class="page-link"
                                   href="${pageContext.request.contextPath}/order/list?page=${currentPage - 1}&size=${pageSize}">
                                    上一页
                                </a>
                            </li>
                        </c:if>

                        <c:forEach begin="1" end="${totalPages}" var="i">
                            <li class="page-item ${i == currentPage ? 'active' : ''}">
                                <a class="page-link"
                                   href="${pageContext.request.contextPath}/order/list?page=${i}&size=${pageSize}">
                                        ${i}
                                </a>
                            </li>
                        </c:forEach>

                        <c:if test="${currentPage < totalPages}">
                            <li class="page-item">
                                <a class="page-link"
                                   href="${pageContext.request.contextPath}/order/list?page=${currentPage + 1}&size=${pageSize}">
                                    下一页
                                </a>
                            </li>
                        </c:if>
                    </ul>
                </nav>
            </c:when>
            <c:otherwise>
                <div class="empty-orders">
                    <i class="bi bi-receipt"></i>
                    <p>您还没有任何订单</p>
                    <a href="${pageContext.request.contextPath}/product/list" class="btn btn-primary">
                        去逛逛
                    </a>
                </div>
            </c:otherwise>
        </c:choose>
    </div>
</div>

<script src="${pageContext.request.contextPath}/resources/js/jquery-3.6.0.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
</body>
</html>
